<template>
  <div class="homework">
    <taskEdit
      class="taskEdit"
      :status="homeworkInfo.status"
      @updateTaskStatus="updateTaskStatus"
    ></taskEdit>
    <div class="list">
      <div class="robot-name">
        <el-select
          v-model="value"
          filterable
          placeholder="请选择"
          clearable
          default-first-option
          popper-class="robot-name"
        >
          <el-option
            v-for="robot in robotName"
            :key="robot.value"
            :label="robot.label"
            :value="robot.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="other">
        <div class="task-list">
          <el-select
            v-model="task"
            placeholder="任务列表"
            popper-class="task-list"
          >
            <el-option
              v-for="item in taskList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="task-path">
          <span>{{ task }}</span
          ><i
            class="iconfont icon-a-youjiantouzhixiangyoujiantou"
            v-if="task"
          ></i>
        </div>
        <div class="add">
          <el-button size="mini" type="info">创建任务</el-button
          ><i class="iconfont icon-shezhi"></i>
        </div>
      </div>
    </div>
    <!-- <div class="map"></div> -->
    <!-- <div class="bottom">
      <div class="icon1"><i class="iconfont icon-guanji"></i></div>
      <div class="icon2">
        <i class="iconfont icon-center">
          <div class="text">录制</div>
        </i>
        <i class="iconfont icon-quxian">
          <div class="text">曲线</div>
        </i>
        <i class="iconfont icon-xiaozhundingwei"
          ><div class="text">标准定位</div></i
        >
      </div>
      <div class="icon3">
        <i class="iconfont icon-shuaxin"></i>
        <i class="iconfont icon-Shape"></i>
        <i class="iconfont icon-changjietu"></i>
      </div>
      <div class="icon4">
        <i class="iconfont icon-back"><div class="text">上一步</div></i>
        <i class="iconfont icon-fanhuixiayibu"
          ><div class="text">下一步</div></i
        >
      </div>
      <div class="icon5">
        <i class="iconfont icon-jia"></i>
        <i class="iconfont icon-jian"></i>
      </div>
      <div class="icon6">
        <i class="iconfont icon-jichangshandian"></i>
        <i class="iconfont icon-chongdian"></i>
      </div>
      <div id="end1" @click="startTask()"><span>开始任务</span></div>
      <div id="end2">
        <span id="stop" @click="stopTask()">暂停</span
        ><span class="end" @click="endTask()">结束</span>
      </div>
    </div> -->
    <div class="right">
      <div class="progress">
        <div class="message">任务进度</div>
        <div class="percent" v-if="homeworkInfo.progressPercent">
          <el-progress
            :percentage="progressPercent"
            color="#575656"
            define-back-color="#8c8989"
            text-color="#fff"
          ></el-progress>
        </div>
      </div>
      <div class="status-info" v-if="homeworkInfo">
        <div class="status">
          <div class="message">状态</div>
          {{ homeworkInfo.status }}
        </div>
        <div class="positionStatus">
          <div class="message">定位状态</div>
          {{ homeworkInfo.positionStatus }}
        </div>
        <div class="electricity">
          <div class="message">电量</div>
          {{ electricity }}
        </div>
        <div class="netDelay">
          <div class="message">网络延时(ms)</div>
          {{ homeworkInfo.netDelay }}
        </div>
        <div class="position" v-if="homeworkInfo.position">
          <div class="message">位置</div>
          {{ homeworkInfo.position.xAxis }},{{ homeworkInfo.position.yAxis }},{{
            homeworkInfo.position.degree
          }}°
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import taskEdit from "../../components/taskEdit.vue";
export default {
  components: {
    taskEdit,
  },
  data() {
    return {
      robotName: [
        {
          value: "robot1",
          label: "gac_eight_floor01",
        },
        {
          value: "robot2",
          label: "gac_eight_floor02",
        },
        {
          value: "robot3",
          label: "gac_eight_floor03",
        },
        {
          value: "robot4",
          label: "gac_eight_floor04",
        },
        {
          value: "robot5",
          label: "gac_eight_floor05",
        },
      ],
      value: "",
      task: "",
      taskList: [
        {
          value: "test_path01",
          label: "任务1",
        },
        {
          value: "test_path02",
          label: "任务2",
        },
        {
          value: "test_path03",
          label: "任务3",
        },
        {
          value: "test_path04",
          label: "任务4",
        },
      ],
      homeworkInfo: {},
      progressPercent: Number,
    };
  },
  mounted() {
    this.getHomework();
  },
  methods: {
    getHomework() {
      this.$api.getHomeworkInfo().then((res) => {
        if (res.status === 200) {
          this.homeworkInfo = res.data;
          this.progressPercent = this.homeworkInfo.progressPercent;
        }
      });
    },
    // startTask() {
    //   document.getElementById("end1").style.visibility = "hidden";
    //   let end2 = document.getElementById("end2");
    //   end2.style.visibility = "visible";
    //   this.homeworkInfo.status = "作业中";
    // },
    // stopTask() {
    //   if (this.homeworkInfo.status === "作业中") {
    //     document.getElementById("stop").innerHTML = "继续";
    //     this.homeworkInfo.status = "任务暂停";
    //   }else{
    //     document.getElementById("stop").innerHTML = "暂停";
    //     this.homeworkInfo.status = "作业中";
    //   }
    // },
    // endTask() {
    //   document.getElementById("end2").style.visibility = "hidden";
    //   document.getElementById("end1").style.visibility = "visible";
    //   this.homeworkInfo.status = "空闲中";
    // },
    updateTaskStatus(status) {
      this.homeworkInfo.status = status;
    },
  },
  computed: {
    ...mapState({
      // electricity: (state) => state.SystemModule.info.battery.electricity,
      electricity: (state) => state.SystemModule.electricity,
    }),
  },
};
</script>
<style lang="less" scoped>
.homework {
  display: flex;
  position: relative;
  // height: 100vh;
  .robot-name,
  .task-list {
    background: #494141;
    border: none;
  }
  /deep/.el-select {
    width: 250px;
    .el-input__inner {
      color: #d6d4d4;
      background: #494141;
      border: none;
    }
  }
  /deep/.el-scrollbar {
    .popper__arrow::after {
      background: #494141;
    }
    .el-select-dropdown__item {
      color: #d6d4d4;
      background: #494141;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: #675b5b;
    }
    .el-scrollbar__wrap {
      margin-right: -20px;
    }
  }

  .list {
    position: absolute;
    box-sizing: border-box;
    padding: 10px 20px;
    .robot-name {
      margin-bottom: 10px;
      width: 250px;
    }
    .other {
      height: 120px;
      width: 250px;
      background: #494141;
      display: flex;
      flex-direction: column;
      .task-list {
        border-bottom: 1px solid #000000;
      }
      .task-path {
        height: 33%;
        margin: 5px;
        background: #5f5757;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: space-between;
        span {
          margin-left: 5px;
        }
        i {
          margin-right: 5px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .add {
      position: relative;
      text-align: center;
      box-sizing: border-box;
      border-top: 1px solid #000000;
      padding: 5px 0;
      i {
        position: absolute;
        cursor: pointer;
        right: 30px;
        top: 10px;
        translate: translateY(-50%);
      }
    }
  }
  .map {
    width: 25%;
    background: #b6b1b1;
    box-sizing: border-box;
    margin: 0 100px;
  }
  .right {
    position: absolute;
    right: 20px;
    top: 10px;
    height: 250px;
    width: 250px;
    border: 2px solid #494141;
    .message {
      font-size: 12px;
      color: #d6d4d4;
    }
    .progress {
      width: 95%;
      height: 25%;
      background: #494141;
      margin: 6px;
      box-sizing: border-box;
      padding: 5px;
      hr {
        border: none;
        margin: 2px;
      }
      .percent {
        .data {
          font-size: 14px;
        }
      }
    }
    .status-info {
      width: 95%;
      height: 68%;
      background: #494141;
      margin: 6px;
      display: flex;
      flex-wrap: wrap;
      .status,
      .positionStatus,
      .electricity,
      .netDelay {
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
      }
      .position {
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
      }
    }
  }
  // .bottom {
  //   display: flex;
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 40px;
  //   background: #494141;
  //   align-items: center;
  //   i {
  //     margin: 10px;
  //     padding: 10px;
  //   }
  //   .icon2 {
  //     margin-left: 150px;
  //   }
  //   .icon3,
  //   .icon4,
  //   .icon5,
  //   .icon6 {
  //     margin-left: 30px;
  //     position: relative;
  //     display: inline-block;
  //   }
  //   .iconfont {
  //     position: relative;
  //     display: inline-block;
  //     .text {
  //       visibility: hidden;
  //       border: 1px solid #969191;
  //       color: #fff;
  //       text-align: center;
  //       border-radius: 5px;
  //       padding: 5px;
  //       position: absolute;
  //       z-index: 1;
  //       left: 200%;
  //       bottom: 125%; /* 使备注在文本上方 */
  //       margin-left: -80px; /* 使备注居中 */
  //       opacity: 0; /* 初始透明度 */
  //     }
  //   }
  //   .iconfont:hover {
  //     background: #675b5b;
  //   }
  //   .iconfont:hover .text {
  //     visibility: visible;
  //     opacity: 1;
  //   }
  //   #end1 {
  //     height: 100%;
  //     width: 100px;
  //     line-height: 100%;
  //     position: absolute;
  //     right: 0;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     background: blue;
  //     &:hover {
  //       cursor: pointer;
  //     }
  //   }
  //   #end2 {
  //     visibility: hidden;
  //     height: 100%;
  //     width: 150px;
  //     position: absolute;
  //     right: 0;
  //     top: 0;
  //     display: flex;
  //     &:hover {
  //       cursor: pointer;
  //     }
  //     #stop {
  //       height: 100%;
  //       width: 50%;
  //       background: #3d3030;
  //       line-height: 40px;
  //       text-align: center;
  //     }
  //     .end {
  //       height: 100%;
  //       width: 50%;
  //       background: red;
  //       text-align: center;
  //       line-height: 40px;
  //     }
  //   }
  // }
}
</style>
